import React, { useState } from "react";
import { PageHeader, Button, Form, Input, Row, Col, Checkbox, message } from "antd";
import { Link, Navigate, useNavigate } from "react-router-dom";
import AddRole from "./index.scss";
import FormItem from "antd/lib/form/FormItem";
import qingqiu from "../../../../../api/ykh/role_ykh"

//表单布局

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

const routes = [
  {
    path: "index",
    breadcrumbName: "设置",
  },
  {
    path: "first",
    breadcrumbName: "角色管理",
  },
  {
    path: 'second',
    breadcrumbName: '新建角色信息',
  },
];

const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['数据概况', '访问量统计', '快捷入口', '课程排行'];

const Addsole = () => {
  const [form] = Form.useForm();
  const [checkedList, setCheckedList] = useState([]);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);
  const navigate = useNavigate()
  const onChange = (list) => {
    // console.log(list);
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };

  const onCheckAllChange = (e) => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  const onFinish = (values) => {
    console.log(values);
  };
  //提交
  const tijiao = () => {
    console.log(form.getFieldsValue());
    let data = form.getFieldsValue();
    qingqiu.InsertRole(data).then((res) => {
      console.log(res);
      if (res.code === 200) {
        message.success('提交成功');
        navigate(-1)
      }
    })
  }

  return <div className="AddRole" style={AddRole}>
    <div className="Header1">
      <PageHeader
        className="site-page-header"
        title="新建角色信息"
        breadcrumb={{
          routes,
        }}
      />
    </div>
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <div className="addRoleMain">
        <h3>基础信息</h3>
        <Row>
          <Col span={6}></Col>
          <Col span={12}>
            <Form.Item name='roleName' label="角色名称" labelCol={4} wrapperCol={24}>
              <Input placeholder="请输入"></Input>
            </Form.Item>
            <Form.Item label="角色描述" name="remark" labelCol={4} wrapperCol={24}>
              <TextArea rows={4} placeholder="请输入"></TextArea>
            </Form.Item>
          </Col>
          <Col span={6}></Col>
        </Row>
      </div>
      <div className="addRoleOther">
        <h3>权限信息</h3>
        <Form.Item name="permissionsTitle">
          <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
            首页
          </Checkbox>
          <br></br>

          <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />


        </Form.Item>
      </div>
      <Row>
        <Col offset={2} span={22}>
          <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <Button type="primary" style={{ marginRight: "8px" }} onClick={tijiao}>提交</Button>
            <Button><Link to={"/home/setting/role"}>返回</Link></Button>

          </FormItem>
        </Col>
      </Row>

    </Form>
  </div>
}

export default Addsole;
